<script setup>
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'

// Dialog对话框控制
const dialogVisible = ref(false)
const draggableDialogVisible = ref(false)
const formDialogVisible = ref(false)

// MessageBox控制
const openConfirm = () => {
  ElMessageBox.confirm(
    '确认删除该条记录吗？删除后将无法恢复。',
    '确认提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消删除',
      })
    })
}

const openAlert = () => {
  ElMessageBox.alert('这是一条提示信息', '提示', {
    confirmButtonText: '确定',
    callback: () => {
      ElMessage({
        type: 'info',
        message: '操作已确认',
      })
    },
  })
}

const openPrompt = () => {
  ElMessageBox.prompt('请输入您的想法', '提交反馈', {
    confirmButtonText: '提交',
    cancelButtonText: '取消',
    inputPattern: /\S+/,
    inputErrorMessage: '输入不能为空',
  })
    .then(({ value }) => {
      ElMessage({
        type: 'success',
        message: `您的反馈: ${value}`,
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消提交',
      })
    })
}

// 表单对话框数据
const formData = ref({
  name: '',
  region: '',
  date: '',
  delivery: false,
  type: [],
  resource: '',
  desc: ''
})

const formRules = {
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' }
  ],
  region: [
    { required: true, message: '请选择区域', trigger: 'change' }
  ],
  date: [
    { required: true, message: '请选择日期', trigger: 'change' }
  ],
  type: [
    { type: 'array', required: true, message: '请至少选择一个活动类型', trigger: 'change' }
  ],
  resource: [
    { required: true, message: '请选择资源', trigger: 'change' }
  ],
  desc: [
    { required: true, message: '请填写活动描述', trigger: 'blur' }
  ]
}

const formRef = ref(null)

const submitForm = async () => {
  if (!formRef.value) return
  
  await formRef.value.validate((valid, fields) => {
    if (valid) {
      ElMessage({
        type: 'success',
        message: '表单提交成功!'
      })
      formDialogVisible.value = false
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = () => {
  if (formRef.value) {
    formRef.value.resetFields()
  }
}
</script>

<template>
  <div class="example-container">
    <div class="page-header bg-white p-4 rounded-lg shadow-sm mb-4">
      <h1 class="text-xl font-bold text-gray-800">弹窗组件示例</h1>
      <p class="text-gray-500 mt-1">展示各种对话框、确认框和弹出层的使用方法</p>
    </div>

    <!-- 基础对话框 -->
    <el-card class="mb-6">
      <template #header>
        <div class="flex items-center">
          <el-icon class="mr-2 text-primary"><ChatSquare /></el-icon>
          <span class="font-medium">Dialog 对话框</span>
        </div>
      </template>
      
      <div class="description mb-4 text-gray-500 text-sm">
        在当前页面打开一个对话框，用于展示信息或进行交互
      </div>
      
      <div class="flex flex-wrap gap-3">
        <el-button type="primary" @click="dialogVisible = true">
          打开基础对话框
        </el-button>
        <el-button @click="draggableDialogVisible = true">
          可拖拽对话框
        </el-button>
        <el-button type="success" @click="formDialogVisible = true">
          表单对话框
        </el-button>
      </div>
      
      <!-- 基础对话框 -->
      <el-dialog
        v-model="dialogVisible"
        title="提示"
        width="30%"
      >
        <span>这是一个基础对话框，用于展示简单信息或操作确认</span>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="dialogVisible = false">
              确认
            </el-button>
          </span>
        </template>
      </el-dialog>
      
      <!-- 可拖拽对话框 -->
      <el-dialog
        v-model="draggableDialogVisible"
        title="可拖拽对话框"
        width="30%"
        draggable
      >
        <span>
          这个对话框可以通过拖拽标题栏来移动位置，提高界面操作的灵活性
        </span>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="draggableDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="draggableDialogVisible = false">
              确认
            </el-button>
          </span>
        </template>
      </el-dialog>
      
      <!-- 表单对话框 -->
      <el-dialog
        v-model="formDialogVisible"
        title="添加活动"
        width="50%"
      >
        <el-form 
          ref="formRef" 
          :model="formData" 
          :rules="formRules" 
          label-width="100px"
        >
          <el-form-item label="活动名称" prop="name">
            <el-input v-model="formData.name" />
          </el-form-item>
          <el-form-item label="活动区域" prop="region">
            <el-select v-model="formData.region" placeholder="请选择活动区域">
              <el-option label="区域一" value="area1" />
              <el-option label="区域二" value="area2" />
            </el-select>
          </el-form-item>
          <el-form-item label="活动时间" prop="date">
            <el-date-picker
              v-model="formData.date"
              type="date"
              placeholder="请选择日期"
              style="width: 100%"
            />
          </el-form-item>
          <el-form-item label="即时配送" prop="delivery">
            <el-switch v-model="formData.delivery" />
          </el-form-item>
          <el-form-item label="活动性质" prop="type">
            <el-checkbox-group v-model="formData.type">
              <el-checkbox label="线上活动" name="type" />
              <el-checkbox label="促销活动" name="type" />
              <el-checkbox label="线下活动" name="type" />
              <el-checkbox label="品牌曝光" name="type" />
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="特殊资源" prop="resource">
            <el-radio-group v-model="formData.resource">
              <el-radio label="线上品牌商赞助" />
              <el-radio label="线下场地资源" />
            </el-radio-group>
          </el-form-item>
          <el-form-item label="活动描述" prop="desc">
            <el-input v-model="formData.desc" type="textarea" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="resetForm">重置</el-button>
            <el-button @click="formDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="submitForm">
              提交
            </el-button>
          </span>
        </template>
      </el-dialog>
    </el-card>

    <!-- MessageBox 消息弹框 -->
    <el-card>
      <template #header>
        <div class="flex items-center">
          <el-icon class="mr-2 text-primary"><InfoFilled /></el-icon>
          <span class="font-medium">MessageBox 消息弹框</span>
        </div>
      </template>
      
      <div class="description mb-4 text-gray-500 text-sm">
        模拟系统的消息提示框，用于消息提示、确认消息和提交内容
      </div>
      
      <div class="flex flex-wrap gap-3">
        <el-button @click="openAlert">消息提示</el-button>
        <el-button @click="openConfirm">确认消息</el-button>
        <el-button @click="openPrompt">提交内容</el-button>
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.example-container {
  max-width: 1200px;
}

.dialog-footer {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
}
</style> 